<!--
 * @Description: 用户管理
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-25 15:31:11
 * @LastEditors: yxx
 * @LastEditTime: 2024-12-09 16:44:01
-->
<template>
  <div class="user-manage-container">
    <el-card>
      <el-form :inline="true" :model="formInline" class="fliter-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="formInline.name" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table">
      <el-button v-auth="'system:user:add'" type="primary" @click="handleAdd">新增</el-button>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%; margin-top: 20px" border>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="用户名称" width="160"> </el-table-column>
        <el-table-column prop="account" label="用户账号" width="160"> </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="160"> </el-table-column>
        <el-table-column prop="email" label="电子邮箱" width="260"> </el-table-column>
        <el-table-column prop="roleId" label="用户角色" width="160">
          <template #default="scope">
            {{ formatUserName(roleOptions, scope.row.roleId) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="账号状态" width="160">
          <template #default="scope">
            <div :style="{ color: scope.row.status === '0' ? '#67C23A' : '#F56C6C' }">
              {{ scope.row.status === "0" ? "正常" : "停用" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" link type="primary">修改</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      background
      layout="->, sizes, prev, pager, next"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="page.pageIndex"
      :page-size="page.pageSize"
      :total="page.totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <AddUserDialog ref="addUserDialogRef" @refresh-data="getTableData"></AddUserDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { getRolePageListApi, getUserPageListApi, deleteUserApi } from "@/api/modules/system"
import { SysRes } from "@/api/interface/system/response"
import AddUserDialog from "./components/AddUserDialog.vue"
import { formatUserName } from "@/utils"

const addUserDialogRef = ref<InstanceType<typeof AddUserDialog>>()

interface FormData {
  name: string
}
const formInline = ref<FormData>({
  name: ""
})
const tableData = ref<SysRes.UserPageList[]>([])
const page = ref<{ [key: string]: number }>({
  pageIndex: 1,
  pageSize: 10,
  totalSize: 0
})
interface Options {
  label: string
  value: number
}
const roleOptions = ref<Options[]>([])

/** 获取 角色选项 */
const getRoleList = () => {
  getRolePageListApi({ pageIndex: 1, pageSize: 9999 }).then(res => {
    res.data.result.forEach(e => {
      roleOptions.value.push({
        value: e.id,
        label: e.name
      })
    })
  })
}
getRoleList()
/** 获取 列表数据 */
const getTableData = async () => {
  const { data } = await getUserPageListApi({
    pageIndex: page.value.pageIndex,
    pageSize: page.value.pageSize,
    ...formInline.value
  })
  tableData.value = data.result
  page.value.totalSize = data.totalCount
}
/** 按钮 重置 */
const handleReset = () => {
  formInline.value.name = ""
  getTableData()
}
/** 按钮 新增 */
const handleAdd = () => {
  addUserDialogRef.value?.handleOpen("新增")
}
/** 表格操作 编辑 */
const handleEdit = (row: SysRes.UserPageList) => {
  addUserDialogRef.value?.handleOpen("编辑", { ...row })
}
/** 表格操作 删除 */
const handleDelete = (row: SysRes.UserPageList) => {
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteUserApi({ ids: [row.id as number] }).then(() => {
      ElMessage.success("删除成功")
    })
  })
}
/** 分页 显示数量改变 */
const handleSizeChange = (val: number) => {
  page.value.pageIndex = 1
  page.value.pageSize = val
  getTableData()
}
/** 分页 当前页数改变 */
const handleCurrentChange = (val: number) => {
  page.value.pageIndex = val
  getTableData()
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">
.user-manage-container {
  .table {
    margin-top: 10px;
  }
}
</style>
